<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>CharacterController Demo</title>
  <style>
    html,
    body {
      overflow: hidden;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    #controls {
      position: absolute;
      top: 0;
      left: 0;
    }

    #renderCanvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      touch-action: none;
    }

    #overlay {
      visibility: hidden;
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      text-align: center;
      z-index: 1000;
    }

    #overlay div {
      width: 600px;
      margin: 100px auto;
      opacity: 0.9;
      text-align: center;
    }

  </style>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="w3.css" media="screen" />
  <script src="../node_modules/babylonjs/babylon.max.js"></script>
  <script src="../node_modules/babylonjs-loaders/babylonjs.loaders.min.js"></script>
  <script src="../node_modules/babylonjs-inspector/babylon.inspector.bundle.js"></script>

  <script src="../dist/CharacterController.js"></script>
  <script src="testNPC.js"></script>
</head>

<body>
  <canvas id="renderCanvas" tabindex="-1"></canvas>

  <div id="controls" style="opacity: 0.9;" class="w3-round w3-card-4 w3-grey">
    <ui class="w3-ul w3-left">
      <li>
        <input type="radio" name="cc" class="w3-radio" id="pc" checked /> player
        <input type="radio" name="cc" class="w3-radio" id="npc" /> npc
      </li>
      <li><button id="pl">pointer lock</button></li>
      <li><button id="w">walk</button><button id="r">run</button></li>
      <li><button id="wb">walkBack</button><button id="wbf">walkBackFast</button></li>
      <li><button id="j">jump</button></li>
      <li><button id="tl">turnLeft</button><button id="tlf">turnLeftFast</button></li>
      <li><button id="tr">turnRight</button><button id="trf">turnRightFast</button></li>
      <li><button id="sl">strafeLeft</button><button id="slf">strafeLeftFast</button></li>
      <li><button id="sr">strafeRight</button><button id="srf">strafeRightFast</button></li>
      <li>
        <input type="radio" name="mode" class="w3-radio" id="td" /> top down
        <br />
        <input type="radio" checked name="mode" class="w3-radio w3-orange" id="tp" /> third person
        <input type="checkbox" id="toff" class="w3-check" />turning off
      </li>
      <li><input type="checkbox" id="kb" checked class="w3-check" />enable keyboard</li>
      <li><button id="help">help</button></li>
      <div id = "fps">0</div>
      <div id = "meshes">0</div>
    </ui>
  </div>

  <div id="overlay">
    <div class="w3-card-4 w3-round w3-grey w3-padding">
      <h3>Demo of CharacterController for Babylonjs</h3>
      <p>
        For more information and source code, head on over to <br />
        <a href="https://ssatguru.github.io/BabylonJS-CharacterController/" target="link"> https://ssatguru.github.io/BabylonJS-CharacterController/</a>
      </p>
      <button id="closehelp">close</button>
    </div>
  </div>
</body>

</html>
